<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="application/javascript" src="/static/js/common.js"></script>
</head>
<body>

    <header class='app-header'>
        <h1 class="app-title">记账系统</h1>
        <p class='app-sub-title'>欢迎使用</p>
    </header>

    <div class="weui-cells__title">身份选择</div>
    <form id="loginForm">
        <div class="weui-cells">
            <div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd" style="display: flex">
                    <svg class="icon" aria-hidden="true" style="width: 45px; height: 45px">
                        <use xlink:href="#icon-renzheng-"></use>
                    </svg>
                    <select class="weui-select" name="loginName">
                        <option th:each="acc: ${accounts}" th:value="${acc.uuid}"
                                th:text="${acc.getUserName()}"></option>
                    </select>
                </div>
            </div>
            <br/>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" name="password" type="password" placeholder="请输入密码">
                </div>
            </div>
        </div>
        <br/>
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" id="login">登录确认</a>
        </div>
    </form>

    <div class="weui-footer weui-footer_fixed-bottom">
        <p class="weui-footer__text">©2020 sks.lwei</p>
    </div>
<script type="application/javascript">
    APP.submitAction($("#login"), function (item) {
        const field = APP.getFormValue($("#loginForm"));
        APP.ajaxSubmit("/api/home/login", field, function (res) {
            APP.ajaxRes(res, function (data) {
                $.toast("登录成功", function () {
                    location.href = "/index"
                });
            }, function (msg) {
                $.toast("验证失败", "forbidden", function () {
                    APP.disabled(item);
                });
            })
        });
    });

</script>

</body>
</html>
